﻿<%@ Page Title="标签管理 " Language="C#" MasterPageFile="~/Admins/Admin.Master" AutoEventWireup="true" CodeBehind="Tags.aspx.cs" Inherits="WebApp.Admins.Tags" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h3>标签管理</h3>

    <div class="container" ng-app="myApp" ng-controller="userCtrl">
        <div class="form-inline">
            <button type="button" class="btn btn-lg btn-primary" ng-click="edited('new')">添加</button>
            <input class="pull-right form-control" ng-model="test" />
        </div>
        <table class="table table-hover table-striped table-bordered">
            <thead>
                <tr>
                    <th>编辑</th>
                    <%--<th>类别Id</th>--%>
                    <th>名称</th>
                    <th>URL地址</th>
                    <th>排序</th>
                    <th>上级名称</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="tag in tags|filter:test">
                    <td>
                        <button type="button" class="btn" ng-click="edited(tag.TagId)">
                            <span class="glyphicon glyphicon-pencil"></span>编辑
                        </button>
                    </td>
                    <%--<td>{{ tag.TagId }}</td>--%>
                    <td>{{ tag.TagName }}</td>
                    <td>{{ tag.TagUrl }}</td>
                    <td>{{ tag.Sort }}</td>
                    <td>{{ findParent(tag.Parent) }}</td>
                    <td>
                        <button type="button" class="btn" ng-click="delete(tag.TagId)">
                            <span class="glyphicon glyphicon-trash"></span>删除
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">{{edit?"编辑":"添加"}}
                        </h4>
                    </div>
                    <div class="form-horizontal">

                        <%--<div class="form-group">
                            <label for="TagId" class="col-sm-2 control-label">类别Id</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="TagId" ng-model="TagId" placeholder="类别Id">
                            </div>
                        </div>--%>
                        <div class="form-group">
                            <label for="TagName" class="col-sm-2 control-label">类别名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="TagName" ng-model="TagName" placeholder="请输入名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="TagUrl" class="col-sm-2 control-label">URL地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="TagUrl" ng-model="TagUrl" placeholder="请输入URL地址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Sort" class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="Sort" ng-model="Sort" placeholder="请输入排序">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Parent" class="col-sm-2 control-label">上级名称</label>
                            <div class="col-sm-10">
                                <%--<input type="text" class="form-control" id="Parent" ng-model="Parent">--%>
                                <select class="form-control" ng-model="Parent" id="Parent">
                                    <option value="00000000-0000-0000-0000-000000000000">顶级</option>
                                    <option ng-repeat="tag in tags" value="{{tag.TagId}}">{{tag.TagName}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer left">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="button" class="btn btn-primary" ng-click="save()">
                            保存数据
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        angular.module('myApp', []).controller('userCtrl', function ($scope, $http) {
            $scope.TagId = '';
            $scope.TagName = '';
            $scope.TagUrl = '';
            $scope.Parent = '';
            $scope.Sort = '';
            $http.get("/api/Tag/GetAll").then(
                function (response) {
                    $scope.tags = response.data;
                });

            $scope.edit = true;
            $scope.error = false;
            $scope.incomplete = false;
            $scope.edited = function (id) {
                $('#myModal').modal('show');
                if (id == 'new') {
                    $scope.edit = false;
                    $scope.TagId = '';
                    $scope.TagName = '';
                    $scope.TagUrl = '';
                    $scope.Parent = '';
                    $scope.Sort = '';
                } else {
                    $scope.edit = true;
                    var index = $scope.findIndex(id);
                    var tag = $scope.tags[index];
                    $scope.TagId = tag.TagId;
                    $scope.TagName = tag.TagName;
                    $scope.TagUrl = tag.TagUrl;
                    $scope.Parent = tag.Parent;
                    $scope.Sort = tag.Sort;
                }
            };

            $scope.save = function () {
                var tagNew = {};
                if ($scope.TagId == "" || $scope.TagId == undefined) {
                    $scope.TagId = $scope.guid();
                }
                tagNew.TagId = $scope.TagId;
                tagNew.TagName = $scope.TagName
                tagNew.TagUrl = $scope.TagUrl;
                tagNew.Parent = $scope.Parent;
                tagNew.Sort = $scope.Sort;

                $http.post('/api/Tag/Exists', tagNew).then(
                function (response) {
                    if (response.data) {
                        alert('名称已经存在');
                    }
                    else {
                        $http.post('/api/Tag/Save', tagNew).then(
                            function (response) {
                                if ($scope.edit) {
                                    var index = $scope.findIndex($scope.TagId);
                                    var tag = $scope.tags[index];
                                    tag.TagName = $scope.TagName
                                    tag.TagUrl = $scope.TagUrl;
                                    tag.Parent = $scope.Parent;
                                    tag.Sort = $scope.Sort;
                                }
                                else $scope.tags.push(tagNew);
                            });
                        $('#myModal').modal('hide');
                    }
                });


            }

            $scope.delete = function (id) {
                if (confirm("确认删除吗?"))
                    $http.post('/api/Tag/Delete?id=' + id).then(
                        function (response) {
                            var index = $scope.findIndex(id);
                            $scope.tags.splice(index, 1);
                        });
            }

            $scope.findParent = function (id) {
                var index = $scope.findIndex(id);
                if (index >= 0)
                    return $scope.tags[index].TagName;
                else return "顶级";
            }

            $scope.findIndex = function (id) {
                for (var i in $scope.tags) {
                    var tag = $scope.tags[i];
                    if (tag.TagId == id) {
                        return i;
                    }
                }
            }

            $scope.guid = function () {
                var guid = '';
                $.ajax({
                    url: '/api/Tools/GetGUID', type: "GET", async: false, success: function (response) {
                        guid = response;
                    }
                });
                return guid;
            }
            //$scope.$watch('passw1', function () { $scope.test(); });
            //$scope.$watch('passw2', function () { $scope.test(); });
            //$scope.$watch('fName', function () { $scope.test(); });
            //$scope.$watch('lName', function () { $scope.test(); });

            //$scope.test = function () {
            //    if ($scope.passw1 !== $scope.passw2) {
            //        $scope.error = true;
            //    } else {
            //        $scope.error = false;
            //    }
            //    $scope.incomplete = false;
            //    if ($scope.edit && (!$scope.fName.length ||
            //      !$scope.lName.length ||
            //      !$scope.passw1.length || !$scope.passw2.length)) {
            //        $scope.incomplete = true;
            //    }
            //};
        })

    </script>


</asp:Content>
